WebGL டெசலேஷன் ஷேடர்கள்: மேற்பரப்பு விவர உருவாக்கத்திற்கான ஒரு விரிவான வழிகாட்டி

WebGL உலாவியிலேயே நேரடியாக ஆழமான மற்றும் பார்வைக்கு வளமான அனுபவங்களை உருவாக்க சக்திவாய்ந்த கருவிகளை வழங்குகிறது. கிடைக்கக்கூடிய மிகவும் மேம்பட்ட நுட்பங்களில் ஒன்று டெசலேஷன் ஷேடர்களின் பயன்பாடு ஆகும். இந்த ஷேடர்கள் உங்கள் 3D மாடல்களின் விவரங்களை இயக்க நேரத்தில் மாறும் வகையில் அதிகரிக்க அனுமதிக்கின்றன, ஆரம்ப மெஷ் சிக்கலான தன்மை அதிகமாகத் தேவைப்படாமல் காட்சி நம்பகத்தன்மையை மேம்படுத்துகின்றன. வலை அடிப்படையிலான பயன்பாடுகளுக்கு இது மிகவும் மதிப்புமிக்கது, அங்கு பதிவிறக்க அளவைக் குறைப்பதும் செயல்திறனை மேம்படுத்துவதும் முக்கியம்.

டெசலேஷன் என்றால் என்ன?

கணினி வரைகலையின் பின்னணியில், டெசலேஷன் என்பது ஒரு மேற்பரப்பை முக்கோணங்கள் போன்ற சிறிய பிரிவுகளாகப் பிரிக்கும் செயல்முறையைக் குறிக்கிறது. இந்த செயல்முறை மேற்பரப்பின் வடிவியல் விவரத்தை திறம்பட அதிகரிக்கிறது, மேலும் சிக்கலான மற்றும் யதார்த்தமான வடிவங்களை அனுமதிக்கிறது. பாரம்பரியமாக, இந்த துணைப்பிரிவு ஆஃப்லைனில் செய்யப்பட்டது, கலைஞர்கள் அதிக விரிவான மாதிரிகளை உருவாக்க வேண்டியிருந்தது. இருப்பினும், டெசலேஷன் ஷேடர்கள் இந்த செயல்முறையை நேரடியாக GPU-வில் நடக்க உதவுகின்றன, விவர உருவாக்கத்திற்கு ஒரு மாறும் மற்றும் தகவமைப்பு அணுகுமுறையை வழங்குகின்றன.

WebGL-இல் டெசலேஷன் பைப்லைன்

WebGL-இல் உள்ள டெசலேஷன் பைப்லைன் (`GL_EXT_tessellation` நீட்டிப்புடன், இது ஆதரவுக்காகச் சரிபார்க்கப்பட வேண்டும்) வெர்டெக்ஸ் மற்றும் ஃபிராக்மென்ட் ஷேடர்களுக்கு இடையில் செருகப்பட்ட மூன்று ஷேடர் நிலைகளைக் கொண்டுள்ளது:

• டெசலேஷன் கண்ட்ரோல் ஷேடர் (TCS): இந்த ஷேடர் ஒரு பேட்ச்சை (எ.கா., ஒரு முக்கோணம் அல்லது குவாட்) வரையறுக்கும் ஒரு நிலையான எண்ணிக்கையிலான வெர்டெக்ஸ்கள் மீது செயல்படுகிறது. அதன் முதன்மைப் பொறுப்பு டெசலேஷன் காரணிகளை கணக்கிடுவது. இந்த காரணிகள் பேட்ச் அதன் விளிம்புகளில் எத்தனை முறை பிரிக்கப்படும் என்பதை தீர்மானிக்கின்றன. TCS ஆனது பேட்ச்சில் உள்ள வெர்டெக்ஸ்களின் நிலைகளையும் மாற்றியமைக்க முடியும்.
• டெசலேஷன் மதிப்பீட்டு ஷேடர் (TES): TES ஆனது டெசலேட்டரிலிருந்து டெசலேட் செய்யப்பட்ட வெளியீட்டைப் பெறுகிறது. இது உருவாக்கப்பட்ட டெசலேஷன் கோஆர்டினேட்களின் அடிப்படையில் அசல் பேட்ச் வெர்டெக்ஸ்களின் பண்புகளை இடைச்செருகல் செய்கிறது மற்றும் புதிய வெர்டெக்ஸ்களின் இறுதி நிலை மற்றும் பிற பண்புகளைக் கணக்கிடுகிறது. இங்குதான் நீங்கள் வழக்கமாக இடப்பெயர்ச்சி மேப்பிங் அல்லது பிற மேற்பரப்பு சிதைவு நுட்பங்களைப் பயன்படுத்துவீர்கள்.
• டெசலேட்டர்: இது ஒரு நிலையான-செயல்பாட்டு நிலை (நீங்கள் நேரடியாக நிரல்படுத்தும் ஷேடர் அல்ல), இது TCS மற்றும் TES இடையே அமர்ந்திருக்கிறது. இது TCS ஆல் உருவாக்கப்பட்ட டெசலேஷன் காரணிகளின் அடிப்படையில் பேட்ச்சின் உண்மையான துணைப்பிரிவைச் செய்கிறது. இது ஒவ்வொரு புதிய வெர்டெக்ஸுக்கும் இயல்பாக்கப்பட்ட (u, v) கோஆர்டினேட்களின் தொகுப்பை உருவாக்குகிறது.

முக்கிய குறிப்பு: இதை எழுதும்போது, டெசலேஷன் ஷேடர்கள் கோர் WebGL-இல் நேரடியாக ஆதரிக்கப்படவில்லை. நீங்கள் `GL_EXT_tessellation` நீட்டிப்பைப் பயன்படுத்த வேண்டும், மேலும் பயனரின் உலாவி மற்றும் கிராபிக்ஸ் கார்டு அதை ஆதரிக்கிறதா என்பதை உறுதிப்படுத்த வேண்டும். டெசலேஷனைப் பயன்படுத்த முயற்சிக்கும் முன் எப்போதும் நீட்டிப்பு கிடைப்பதைச் சரிபார்க்கவும்.

டெசலேஷன் நீட்டிப்பு ஆதரவைச் சரிபார்த்தல்

நீங்கள் டெசலேஷன் ஷேடர்களைப் பயன்படுத்துவதற்கு முன், `GL_EXT_tessellation` நீட்டிப்பு கிடைக்கிறதா என்பதை நீங்கள் சரிபார்க்க வேண்டும். JavaScript-இல் அதை எப்படிச் செய்யலாம் என்பது இங்கே:

            
const gl = canvas.getContext('webgl2'); // Or 'webgl'
if (!gl) {
  console.error("WebGL not supported.");
  return;
}

const ext = gl.getExtension('GL_EXT_tessellation');
if (!ext) {
  console.warn("GL_EXT_tessellation extension not supported.");
  // Fallback to a lower-detail rendering method
} else {
  // Tessellation is supported, proceed with your tessellation code
}

            

              
                Copy
              
            
          

டெசலேஷன் கண்ட்ரோல் ஷேடர் (TCS) விரிவாக

TCS என்பது டெசலேஷன் பைப்லைனில் உள்ள முதல் நிரல்படுத்தக்கூடிய நிலை. இது உள்ளீட்டு பேட்ச்சில் உள்ள ஒவ்வொரு வெர்டெக்ஸுக்கும் ஒரு முறை இயங்குகிறது (`gl.patchParameteri(gl.PATCHES, gl.PATCH_VERTICES, numVertices);` மூலம் வரையறுக்கப்படுகிறது). ஒரு பேட்ச்சுக்கான உள்ளீட்டு வெர்டெக்ஸ்களின் எண்ணிக்கை முக்கியமானது மற்றும் வரைவதற்கு முன் அமைக்கப்பட வேண்டும்.

TCS-இன் முக்கியப் பொறுப்புகள்

• டெசலேஷன் காரணிகளைக் கணக்கிடுதல்: TCS ஆனது உள் மற்றும் வெளி டெசலேஷன் நிலைகளைத் தீர்மானிக்கிறது. உள் டெசலேஷன் நிலை பேட்ச்சுக்குள் உள்ள துணைப்பிரிவுகளின் எண்ணிக்கையைக் கட்டுப்படுத்துகிறது, அதே நேரத்தில் வெளி டெசலேஷன் நிலை விளிம்புகளில் உள்ள துணைப்பிரிவுகளைக் கட்டுப்படுத்துகிறது.
• வெர்டெக்ஸ் நிலைகளை மாற்றுதல் (விருப்பத்தேர்வு): TCS டெசலேஷனுக்கு முன் உள்ளீட்டு வெர்டெக்ஸ்களின் நிலைகளையும் சரிசெய்ய முடியும். இது ப்ரீ-டெசலேஷன் இடப்பெயர்ச்சி அல்லது பிற வெர்டெக்ஸ் அடிப்படையிலான விளைவுகளுக்குப் பயன்படுத்தப்படலாம்.
• TES-க்கு தரவை அனுப்புதல்: TCS ஆனது TES ஆல் இடைச்செருகல் செய்யப்பட்டு பயன்படுத்தப்படும் தரவை வெளியிடுகிறது. இதில் வெர்டெக்ஸ் நிலைகள், நார்மல்கள், டெக்ஸ்ச்சர் கோஆர்டினேட்கள் மற்றும் பிற பண்புகள் இருக்கலாம். நீங்கள் `patch out` தகுதிச்சொல்லுடன் வெளியீட்டு மாறிகளை அறிவிக்க வேண்டும்.

எடுத்துக்காட்டு TCS குறியீடு (GLSL)

            #version 300 es
#extension GL_EXT_tessellation : require

layout (vertices = 3) out; // We're using triangles as patches

in vec3 vPosition[]; // Input vertex positions

out vec3 tcPosition[]; // Output vertex positions (passed to TES)

uniform float tessLevelInner;
uniform float tessLevelOuter;

void main() {
  // Ensure the tessellation level is reasonable
  gl_TessLevelInner[0] = tessLevelInner;
  for (int i = 0; i < 3; i++) {
    gl_TessLevelOuter[i] = tessLevelOuter;
  }

  // Pass vertex positions to the TES (you can modify them here if needed)
  tcPosition[gl_InvocationID] = vPosition[gl_InvocationID];
}

            

              
                Copy
              
            
          

விளக்கம்:

• `#version 300 es`: GLSL ES 3.0 பதிப்பைக் குறிப்பிடுகிறது.
• `#extension GL_EXT_tessellation : require`: டெசலேஷன் நீட்டிப்பு தேவை. `: require` என்பது நீட்டிப்பு ஆதரிக்கப்படாவிட்டால் ஷேடர் தொகுக்கத் தவறுகிறது என்பதை உறுதி செய்கிறது.
• `layout (vertices = 3) out;`: TCS 3 வெர்டெக்ஸ்கள் (முக்கோணங்கள்) கொண்ட பேட்ச்களை வெளியிடுகிறது என்று அறிவிக்கிறது.
• `in vec3 vPosition[];`: உள்ளீட்டு பேட்ச்சின் வெர்டெக்ஸ் நிலைகளைக் குறிக்கும் `vec3` (3D வெக்டார்கள்) உள்ளீட்டு வரிசையை அறிவிக்கிறது. `vPosition[gl_InvocationID]` தற்போது செயலாக்கப்படும் வெர்டெக்ஸின் நிலையை அணுகுகிறது. `gl_InvocationID` என்பது பேட்ச்சிற்குள் தற்போதைய வெர்டெக்ஸின் குறியீட்டைக் குறிக்கும் ஒரு உள்ளமைக்கப்பட்ட மாறி ஆகும்.
• `out vec3 tcPosition[];`: TES-க்கு அனுப்பப்படும் வெர்டெக்ஸ் நிலைகளைக் கொண்டிருக்கும் `vec3`-இன் வெளியீட்டு வரிசையை அறிவிக்கிறது. `patch out` என்ற முக்கிய சொல் (இங்கு TCS வெளியீடாக இருப்பதால் மறைமுகமாகப் பயன்படுத்தப்படுகிறது) இந்த மாறிகள் ஒரு ஒற்றை வெர்டெக்ஸுடன் அல்ல, முழு பேட்ச்சுடனும் தொடர்புடையவை என்பதைக் குறிக்கிறது.
• `gl_TessLevelInner[0] = tessLevelInner;`: உள் டெசலேஷன் நிலையை அமைக்கிறது. முக்கோணங்களுக்கு, ஒரே ஒரு உள் நிலை மட்டுமே உள்ளது.
• `for (int i = 0; i < 3; i++) { gl_TessLevelOuter[i] = tessLevelOuter; }`: முக்கோணத்தின் ஒவ்வொரு விளிம்பிற்கும் வெளி டெசலேஷன் நிலைகளை அமைக்கிறது.
• `tcPosition[gl_InvocationID] = vPosition[gl_InvocationID];`: உள்ளீட்டு வெர்டெக்ஸ் நிலைகளை நேரடியாக TES-க்கு அனுப்புகிறது. இது ஒரு எளிய எடுத்துக்காட்டு; நீங்கள் இங்கு மாற்றங்கள் அல்லது பிற கணக்கீடுகளைச் செய்யலாம்.

டெசலேஷன் மதிப்பீட்டு ஷேடர் (TES) விரிவாக

TES என்பது டெசலேஷன் பைப்லைனில் உள்ள இறுதி நிரல்படுத்தக்கூடிய நிலை. இது டெசலேட்டரிலிருந்து டெசலேட் செய்யப்பட்ட வெளியீட்டைப் பெறுகிறது, அசல் பேட்ச் வெர்டெக்ஸ்களின் பண்புகளை இடைச்செருகல் செய்கிறது, மேலும் புதிய வெர்டெக்ஸ்களின் இறுதி நிலை மற்றும் பிற பண்புகளைக் கணக்கிடுகிறது. இங்குதான் மேஜிக் நிகழ்கிறது, ஒப்பீட்டளவில் எளிய உள்ளீட்டு பேட்ச்களிலிருந்து விரிவான மேற்பரப்புகளை உருவாக்க உங்களை அனுமதிக்கிறது.

TES-இன் முக்கியப் பொறுப்புகள்

• வெர்டெக்ஸ் பண்புகளை இடைச்செருகல் செய்தல்: TES ஆனது டெசலேட்டரால் உருவாக்கப்பட்ட டெசலேஷன் கோஆர்டினேட்களின் (u, v) அடிப்படையில் TCS-இலிருந்து அனுப்பப்பட்ட தரவை இடைச்செருகல் செய்கிறது.
• இடப்பெயர்ச்சி மேப்பிங்: TES ஆனது ஒரு ஹைட்மேப் அல்லது பிற டெக்ஸ்ச்சரைப் பயன்படுத்தி வெர்டெக்ஸ்களை இடமாற்றம் செய்து, யதார்த்தமான மேற்பரப்பு விவரங்களை உருவாக்க முடியும்.
• நார்மல் கணக்கீடு: இடப்பெயர்ச்சிக்குப் பிறகு, சரியான லைட்டிங்கை உறுதிப்படுத்த TES மேற்பரப்பு நார்மல்களை மீண்டும் கணக்கிட வேண்டும்.
• இறுதி வெர்டெக்ஸ் பண்புகளை உருவாக்குதல்: TES ஆனது ஃபிராக்மென்ட் ஷேடரால் பயன்படுத்தப்படும் இறுதி வெர்டெக்ஸ் நிலை, நார்மல், டெக்ஸ்ச்சர் கோஆர்டினேட்கள் மற்றும் பிற பண்புகளை வெளியிடுகிறது.

இடப்பெயர்ச்சி மேப்பிங்குடன் எடுத்துக்காட்டு TES குறியீடு (GLSL)

            #version 300 es
#extension GL_EXT_tessellation : require

layout (triangles, equal_spacing, ccw) in; // Tessellation mode and winding order

uniform sampler2D heightMap;
uniform float heightScale;

in vec3 tcPosition[]; // Input vertex positions from TCS

out vec3 vPosition; // Output vertex position (passed to fragment shader)

out vec3 vNormal;   // Output vertex normal (passed to fragment shader)

void main() {
  // Interpolate vertex positions
  vec3 p0 = tcPosition[0];
  vec3 p1 = tcPosition[1];
  vec3 p2 = tcPosition[2];
  vec3 position = mix(mix(p0, p1, gl_TessCoord.x), p2, gl_TessCoord.y);

  // Calculate displacement from heightmap
  float height = texture(heightMap, gl_TessCoord.xy).r;
  vec3 displacement = normalize(cross(p1 - p0, p2 - p0)) * height * heightScale; // Displace along the normal
  position += displacement;

  vPosition = position;

  // Calculate tangent and bitangent
  vec3 tangent = normalize(p1 - p0);
  vec3 bitangent = normalize(p2 - p0);

  // Calculate normal
  vNormal = normalize(cross(tangent, bitangent));

  gl_Position = gl_in[0].gl_Position + vec4(displacement, 0.0); // Apply displacement in clip space, simple approach
}

            

              
                Copy
              
            
          

விளக்கம்:

• `layout (triangles, equal_spacing, ccw) in;`: டெசலேஷன் பயன்முறை (முக்கோணங்கள்), இடைவெளி (சமம்), மற்றும் வைண்டிங் ஆர்டர் (எதிர்-கடிகார திசை) ஆகியவற்றைக் குறிப்பிடுகிறது.
• `uniform sampler2D heightMap;`: ஹைட்மேப் டெக்ஸ்ச்சருக்கான ஒரு யூனிஃபார்ம் sampler2D மாறியை அறிவிக்கிறது.
• `uniform float heightScale;`: இடப்பெயர்ச்சியை அளவிடுவதற்கான ஒரு யூனிஃபார்ம் float மாறியை அறிவிக்கிறது.
• `in vec3 tcPosition[];`: TCS-இலிருந்து அனுப்பப்பட்ட வெர்டெக்ஸ் நிலைகளைக் குறிக்கும் `vec3`-இன் உள்ளீட்டு வரிசையை அறிவிக்கிறது.
• `gl_TessCoord.xy`: டெசலேட்டரால் உருவாக்கப்பட்ட (u, v) டெசலேஷன் கோஆர்டினேட்களைக் கொண்டுள்ளது. இந்த கோஆர்டினேட்கள் வெர்டெக்ஸ் பண்புகளை இடைச்செருகல் செய்யப் பயன்படுத்தப்படுகின்றன.
• `mix(a, b, t)`: `t` என்ற காரணியைப் பயன்படுத்தி `a` மற்றும் `b` இடையே நேரியல் இடைச்செருகலைச் செய்யும் ஒரு உள்ளமைக்கப்பட்ட GLSL செயல்பாடு.
• `texture(heightMap, gl_TessCoord.xy).r`: (u, v) டெசலேஷன் கோஆர்டினேட்களில் ஹைட்மேப் டெக்ஸ்ச்சரிலிருந்து சிவப்பு சேனலை மாதிரிகள் எடுக்கிறது. சிவப்பு சேனல் உயர மதிப்பைக் குறிப்பதாகக் கருதப்படுகிறது.
• `normalize(cross(p1 - p0, p2 - p0))`: இரண்டு விளிம்புகளின் குறுக்கு பெருக்கத்தைக் கணக்கிட்டு முடிவை இயல்பாக்குவதன் மூலம் முக்கோணத்தின் மேற்பரப்பு நார்மலை தோராயமாக கணக்கிடுகிறது. இது மிகவும் கரடுமுரடான தோராயமாகும், ஏனெனில் விளிம்புகள் *அசல்* (டெசலேட் செய்யப்படாத) முக்கோணத்தை அடிப்படையாகக் கொண்டவை. மேலும் துல்லியமான முடிவுகளுக்கு இது கணிசமாக மேம்படுத்தப்படலாம்.
• `position += displacement;`: கணக்கிடப்பட்ட நார்மலுடன் வெர்டெக்ஸ் நிலையை இடமாற்றம் செய்கிறது.
• `vPosition = position;`: இறுதி வெர்டெக்ஸ் நிலையை ஃபிராக்மென்ட் ஷேடருக்கு அனுப்புகிறது.
• `gl_Position = gl_in[0].gl_Position + vec4(displacement, 0.0);`: இறுதி கிளிப்-ஸ்பேஸ் நிலையை கணக்கிடுகிறது. முக்கிய குறிப்பு: அசல் கிளிப் ஸ்பேஸ் நிலையில் இடப்பெயர்ச்சியைச் சேர்க்கும் இந்த எளிய அணுகுமுறை **சிறந்தது அல்ல** மற்றும் குறிப்பாக பெரிய இடப்பெயர்ச்சிகளுடன் காட்சிப் பிழைகளுக்கு வழிவகுக்கும். மாடல்-வியூ-புரொஜெக்ஷன் மேட்ரிக்ஸைப் பயன்படுத்தி இடமாற்றம் செய்யப்பட்ட வெர்டெக்ஸ் நிலையை கிளிப் ஸ்பேஸுக்கு மாற்றுவது மிகவும் சிறந்தது.

ஃபிராக்மென்ட் ஷேடர் கருத்தாய்வுகள்

ஃபிராக்மென்ட் ஷேடர் ரெண்டர் செய்யப்பட்ட மேற்பரப்பின் பிக்சல்களுக்கு நிறம் கொடுப்பதற்குப் பொறுப்பாகும். டெசலேஷன் ஷேடர்களைப் பயன்படுத்தும் போது, ஃபிராக்மென்ட் ஷேடர் இடைச்செருகப்பட்ட நிலை, நார்மல் மற்றும் டெக்ஸ்ச்சர் கோஆர்டினேட்கள் போன்ற சரியான வெர்டெக்ஸ் பண்புகளைப் பெறுவதை உறுதி செய்வது முக்கியம். உங்கள் ஃபிராக்மென்ட் ஷேடர் கணக்கீடுகளில் TES-இன் `vPosition` மற்றும் `vNormal` வெளியீடுகளைப் பயன்படுத்த நீங்கள் விரும்புவீர்கள்.

எடுத்துக்காட்டு ஃபிராக்மென்ட் ஷேடர் குறியீடு (GLSL)

            #version 300 es
precision highp float;

in vec3 vPosition; // Vertex position from TES
in vec3 vNormal;   // Vertex normal from TES

out vec4 fragColor;

void main() {
  // Simple diffuse lighting
  vec3 lightDir = normalize(vec3(1.0, 1.0, 1.0));
  float diffuse = max(dot(vNormal, lightDir), 0.0);
  vec3 color = vec3(0.8, 0.8, 0.8) * diffuse; // Light gray

  fragColor = vec4(color, 1.0);
}

            

              
                Copy
              
            
          

விளக்கம்:

• `in vec3 vPosition;`: TES-இலிருந்து இடைச்செருகப்பட்ட வெர்டெக்ஸ் நிலையைப் பெறுகிறது.
• `in vec3 vNormal;`: TES-இலிருந்து இடைச்செருகப்பட்ட வெர்டெக்ஸ் நார்மலைப் பெறுகிறது.
• மீதமுள்ள குறியீடு இடைச்செருகப்பட்ட நார்மலைப் பயன்படுத்தி ஒரு எளிய பரவல் லைட்டிங் விளைவைக் கணக்கிடுகிறது.

வெர்டெக்ஸ் அரே ஆப்ஜெக்ட் (VAO) மற்றும் பஃபர் அமைப்பு

வெர்டெக்ஸ் தரவு மற்றும் பஃபர் ஆப்ஜெக்ட்களை அமைப்பது வழக்கமான WebGL ரெண்டரிங் போலவே உள்ளது, ஆனால் சில முக்கிய வேறுபாடுகளுடன். உள்ளீட்டு பேட்ச்களுக்கான (எ.கா., முக்கோணங்கள் அல்லது குவாட்கள்) வெர்டெக்ஸ் தரவை நீங்கள் வரையறுக்க வேண்டும், பின்னர் இந்த பஃபர்களை வெர்டெக்ஸ் ஷேடரில் உள்ள பொருத்தமான பண்புகளுடன் பிணைக்க வேண்டும். வெர்டெக்ஸ் ஷேடர் டெசலேஷன் கண்ட்ரோல் ஷேடரால் தவிர்க்கப்படுவதால், நீங்கள் பண்புகளை TCS உள்ளீட்டு பண்புகளுடன் பிணைக்கிறீர்கள்.

VAO மற்றும் பஃபர் அமைப்பிற்கான எடுத்துக்காட்டு JavaScript குறியீடு

            
const positions = [
  -0.5, -0.5, 0.0,
   0.5, -0.5, 0.0,
   0.0,  0.5, 0.0
];

// Create and bind the VAO
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

// Create and bind the vertex buffer
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// Get the attribute location of vPosition in the TCS (not the vertex shader!)
const positionAttribLocation = gl.getAttribLocation(tcsProgram, 'vPosition');
gl.enableVertexAttribArray(positionAttribLocation);
gl.vertexAttribPointer(
  positionAttribLocation,
  3,           // Size (3 components)
  gl.FLOAT,    // Type
  false,       // Normalized
  0,           // Stride
  0            // Offset
);

// Unbind VAO
gl.bindVertexArray(null);

            

              
                Copy
              
            
          

டெசலேஷன் ஷேடர்களுடன் ரெண்டரிங் செய்தல்

டெசலேஷன் ஷேடர்களுடன் ரெண்டர் செய்ய, நீங்கள் பொருத்தமான ஷேடர் நிரலை (வெர்டெக்ஸ் ஷேடர் தேவைப்பட்டால், TCS, TES மற்றும் ஃபிராக்மென்ட் ஷேடர் ஆகியவற்றைக் கொண்டது) பிணைக்க வேண்டும், யூனிஃபார்ம் மாறிகளை அமைக்க வேண்டும், VAO-ஐ பிணைக்க வேண்டும், பின்னர் `gl.drawArrays(gl.PATCHES, 0, vertexCount)` ஐ அழைக்க வேண்டும். வரைவதற்கு முன் `gl.patchParameteri(gl.PATCHES, gl.PATCH_VERTICES, numVertices);` ஐப் பயன்படுத்தி ஒரு பேட்ச்சுக்கு வெர்டெக்ஸ்களின் எண்ணிக்கையை அமைக்க நினைவில் கொள்ளுங்கள்.

ரெண்டரிங் செய்வதற்கான எடுத்துக்காட்டு JavaScript குறியீடு

            
gl.useProgram(tessellationProgram);

// Set uniform variables (e.g., tessLevelInner, tessLevelOuter, heightScale)
gl.uniform1f(gl.getUniformLocation(tessellationProgram, 'tessLevelInner'), tessLevelInnerValue);
gl.uniform1f(gl.getUniformLocation(tessellationProgram, 'tessLevelOuter'), tessLevelOuterValue);
gl.uniform1f(gl.getUniformLocation(tessellationProgram, 'heightScale'), heightScaleValue);

// Bind the heightmap texture
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, heightMapTexture);
gl.uniform1i(gl.getUniformLocation(tessellationProgram, 'heightMap'), 0); // Texture unit 0

// Bind the VAO
gl.bindVertexArray(vao);

// Set the number of vertices per patch
gl.patchParameteri(gl.PATCHES, gl.PATCH_VERTICES, 3); // Triangles

// Draw the patches
gl.drawArrays(gl.PATCHES, 0, positions.length / 3); // 3 vertices per triangle

//Unbind VAO
gl.bindVertexArray(null);

            

              
                Copy
              
            
          

தகவமைப்பு டெசலேஷன்

டெசலேஷன் ஷேடர்களின் மிகவும் சக்திவாய்ந்த அம்சங்களில் ஒன்று தகவமைப்பு டெசலேஷன் செய்யும் திறன் ஆகும். இதன் பொருள், கேமராவிலிருந்து தூரம், மேற்பரப்பின் வளைவு அல்லது பேட்ச்சின் திரை-இடைவெளி அளவு போன்ற காரணிகளின் அடிப்படையில் டெசலேஷன் அளவை மாறும் வகையில் சரிசெய்யலாம். தகவமைப்பு டெசலேஷன் உங்களுக்கு மிகவும் தேவைப்படும் இடத்தில் விவரங்களை மையப்படுத்த அனுமதிக்கிறது, செயல்திறன் மற்றும் காட்சி தரத்தை மேம்படுத்துகிறது.

தூரம்-அடிப்படையிலான டெசலேஷன்

ஒரு பொதுவான அணுகுமுறை கேமராவுக்கு அருகில் உள்ள பொருட்களுக்கு டெசலேஷன் அளவை அதிகரிப்பது மற்றும் தொலைவில் உள்ள பொருட்களுக்கு அதைக் குறைப்பது ஆகும். கேமராவுக்கும் பொருளுக்கும் இடையிலான தூரத்தைக் கணக்கிட்டு, பின்னர் இந்த தூரத்தை ஒரு டெசலேஷன் நிலை வரம்பிற்கு வரைபடம் செய்வதன் மூலம் இதை அடையலாம்.

வளைவு-அடிப்படையிலான டெசலேஷன்

மற்றொரு அணுகுமுறை அதிக வளைவு உள்ள பகுதிகளில் டெசலேஷன் அளவை அதிகரிப்பது மற்றும் குறைந்த வளைவு உள்ள பகுதிகளில் அதைக் குறைப்பது ஆகும். மேற்பரப்பின் வளைவைக் கணக்கிட்டு (எ.கா., லேப்லாசியன் ஆபரேட்டரைப் பயன்படுத்தி), பின்னர் இந்த வளைவு மதிப்பைப் பயன்படுத்தி டெசலேஷன் அளவை சரிசெய்வதன் மூலம் இதை அடையலாம்.

செயல்திறன் கருத்தாய்வுகள்

டெசலேஷன் ஷேடர்கள் காட்சி தரத்தை கணிசமாக மேம்படுத்த முடியும் என்றாலும், கவனமாகப் பயன்படுத்தப்படாவிட்டால் அவை செயல்திறனையும் பாதிக்கலாம். இங்கே சில முக்கிய செயல்திறன் கருத்தாய்வுகள் உள்ளன:

• டெசலேஷன் நிலை: அதிக டெசலேஷன் நிலைகள் செயலாக்கப்பட வேண்டிய வெர்டெக்ஸ்கள் மற்றும் ஃபிராக்மென்ட்களின் எண்ணிக்கையை அதிகரிக்கின்றன, இது செயல்திறன் தடைகளுக்கு வழிவகுக்கும். டெசலேஷன் நிலைகளைத் தேர்ந்தெடுக்கும்போது காட்சி தரம் மற்றும் செயல்திறனுக்கு இடையிலான வர்த்தகத்தை கவனமாகக் கருத்தில் கொள்ளுங்கள்.
• இடப்பெயர்ச்சி மேப்பிங் சிக்கலான தன்மை: சிக்கலான இடப்பெயர்ச்சி மேப்பிங் அல்காரிதம்கள் கணக்கீட்டு ரீதியாக விலை உயர்ந்ததாக இருக்கலாம். செயல்திறன் தாக்கத்தைக் குறைக்க உங்கள் இடப்பெயர்ச்சி மேப்பிங் கணக்கீடுகளை மேம்படுத்துங்கள்.
• நினைவக அலைவரிசை: இடப்பெயர்ச்சி மேப்பிங்கிற்காக ஹைட்மேப்கள் அல்லது பிற டெக்ஸ்ச்சர்களைப் படிப்பது குறிப்பிடத்தக்க நினைவக அலைவரிசையை நுகரலாம். நினைவக தடம் குறைக்க மற்றும் செயல்திறனை மேம்படுத்த டெக்ஸ்ச்சர் சுருக்க நுட்பங்களைப் பயன்படுத்தவும்.
• ஷேடர் சிக்கலான தன்மை: GPU மீதான செயலாக்க சுமையைக் குறைக்க உங்கள் டெசலேஷன் மற்றும் ஃபிராக்மென்ட் ஷேடர்களை முடிந்தவரை எளிமையாக வைத்திருங்கள்.
• ஓவர்டிரா: அதிகப்படியான டெசலேஷன் ஓவர்டிராவுக்கு வழிவகுக்கும், அங்கு பிக்சல்கள் பல முறை வரையப்படுகின்றன. பேக்ஃபேஸ் கலிங் மற்றும் டெப்த் டெஸ்டிங் போன்ற நுட்பங்களைப் பயன்படுத்தி ஓவர்டிராவைக் குறைக்கவும்.

டெசலேஷனுக்கு மாற்றுகள்

டெசலேஷன் மேற்பரப்பு விவரங்களைச் சேர்க்க ஒரு சக்திவாய்ந்த தீர்வை வழங்கினாலும், அது எப்போதும் சிறந்த தேர்வாக இருக்காது. இந்த மாற்றுகளைக் கருத்தில் கொள்ளுங்கள், ஒவ்வொன்றும் அதன் சொந்த பலங்களையும் பலவீனங்களையும் வழங்குகின்றன:

• நார்மல் மேப்பிங்: லைட்டிங் கணக்கீடுகளுக்குப் பயன்படுத்தப்படும் மேற்பரப்பு நார்மலை மாற்றுவதன் மூலம் மேற்பரப்பு விவரத்தை உருவகப்படுத்துகிறது. இது ஒப்பீட்டளவில் மலிவானது ஆனால் உண்மையான வடிவவியலை மாற்றுவதில்லை.
• பாரலாக்ஸ் மேப்பிங்: பார்க்கும் கோணத்தின் அடிப்படையில் டெக்ஸ்ச்சர் கோஆர்டினேட்களை மாற்றுவதன் மூலம் ஆழத்தை உருவகப்படுத்தும் ஒரு மேம்பட்ட நார்மல் மேப்பிங் நுட்பம்.
• இடப்பெயர்ச்சி மேப்பிங் (டெசலேஷன் இல்லாமல்): வெர்டெக்ஸ் ஷேடரில் இடப்பெயர்ச்சி செய்கிறது. அசல் மெஷ் ரெசொலூஷனால் வரையறுக்கப்பட்டுள்ளது.
• உயர்-பலகோண மாதிரிகள்: 3D மாடலிங் மென்பொருளில் உருவாக்கப்பட்ட முன்-டெசலேட் செய்யப்பட்ட மாதிரிகளைப் பயன்படுத்துதல். நினைவகத்தை அதிகம் பயன்படுத்தலாம்.
• வடிவியல் ஷேடர்கள் (ஆதரிக்கப்பட்டால்): பறக்கும்போது புதிய வடிவவியலை உருவாக்க முடியும், ஆனால் மேற்பரப்பு துணைப்பிரிவு பணிகளுக்கு டெசலேஷனை விட பெரும்பாலும் குறைவான செயல்திறன் கொண்டது.

பயன்பாட்டு நிகழ்வுகள் மற்றும் எடுத்துக்காட்டுகள்

டெசலேஷன் ஷேடர்கள் டைனமிக் மேற்பரப்பு விவரம் விரும்பத்தக்க பலவிதமான சூழ்நிலைகளுக்குப் பொருந்தும். இங்கே சில எடுத்துக்காட்டுகள் உள்ளன:

• நிலப்பரப்பு ரெண்டரிங்: குறைந்த ரெசொலூஷன் ஹைட்மேப்களிலிருந்து விரிவான நிலப்பரப்புகளை உருவாக்குதல், தகவமைப்பு டெசலேஷன் பார்வையாளருக்கு அருகில் விவரங்களை மையப்படுத்துகிறது.
• பாத்திர ரெண்டரிங்: பாத்திர மாதிரிகளுக்கு நுணுக்கமான விவரங்களைச் சேர்ப்பது, அதாவது சுருக்கங்கள், துளைகள் மற்றும் தசை வரையறை, குறிப்பாக நெருக்கமான காட்சிகளில்.
• கட்டிடக்கலை காட்சிப்படுத்தல்: செங்கல் வேலை, கல் வடிவங்கள் மற்றும் அலங்கார வேலைப்பாடுகள் போன்ற சிக்கலான விவரங்களுடன் யதார்த்தமான கட்டிட முகப்புகளை உருவாக்குதல்.
• அறிவியல் காட்சிப்படுத்தல்: மூலக்கூறு கட்டமைப்புகள் அல்லது திரவ உருவகப்படுத்துதல்கள் போன்ற சிக்கலான தரவுத் தொகுப்புகளை விரிவான மேற்பரப்புகளாகக் காண்பித்தல்.
• விளையாட்டு மேம்பாடு: ஏற்றுக்கொள்ளக்கூடிய செயல்திறனைப் பராமரிக்கும் போது, விளையாட்டிலுள்ள சூழல்கள் மற்றும் பாத்திரங்களின் காட்சி நம்பகத்தன்மையை மேம்படுத்துதல்.

எடுத்துக்காட்டு: தகவமைப்பு டெசலேஷனுடன் நிலப்பரப்பு ரெண்டரிங்

ஒரு பரந்த நிலப்பரப்பை ரெண்டரிங் செய்வதை கற்பனை செய்து பாருங்கள். ஒரு நிலையான மெஷ் மூலம், யதார்த்தமான விவரங்களை அடைய உங்களுக்கு நம்பமுடியாத அளவிற்கு அதிக பலகோண எண்ணிக்கை தேவைப்படும், இது செயல்திறனை பாதிக்கும். டெசலேஷன் ஷேடர்களுடன், நீங்கள் குறைந்த ரெசொலூஷன் ஹைட்மேப் மூலம் தொடங்கலாம். TCS கேமராவின் தூரத்தை அடிப்படையாகக் கொண்டு டெசலேஷன் காரணிகளைக் கணக்கிடுகிறது: கேமராவுக்கு அருகில் உள்ள பகுதிகள் அதிக டெசலேஷனைப் பெறுகின்றன, அதிக முக்கோணங்களையும் விவரங்களையும் சேர்க்கின்றன. TES பின்னர் இந்த புதிய வெர்டெக்ஸ்களை இடமாற்றம் செய்ய ஹைட்மேப்பைப் பயன்படுத்துகிறது, மலைகள், பள்ளத்தாக்குகள் மற்றும் பிற நிலப்பரப்பு அம்சங்களை உருவாக்குகிறது. தொலைவில், டெசலேஷன் நிலை குறைக்கப்படுகிறது, காட்சிக்கு ஈர்க்கக்கூடிய நிலப்பரப்பைப் பராமரிக்கும் போது செயல்திறனை மேம்படுத்துகிறது.

எடுத்துக்காட்டு: பாத்திர சுருக்கங்கள் மற்றும் தோல் விவரங்கள்

ஒரு பாத்திரத்தின் முகத்திற்கு, அடிப்படை மாதிரி ஒப்பீட்டளவில் குறைந்த-பலகோணமாக இருக்கலாம். டெசலேஷன், உயர்-ரெசொலூஷன் டெக்ஸ்ச்சரிலிருந்து பெறப்பட்ட இடப்பெயர்ச்சி மேப்பிங்குடன் இணைந்து, கேமரா பெரிதாக்கும்போது கண்கள் மற்றும் வாயைச் சுற்றி யதார்த்தமான சுருக்கங்களைச் சேர்க்கிறது. டெசலேஷன் இல்லாமல், இந்த விவரங்கள் குறைந்த ரெசொலூஷன்களில் இழக்கப்படும். இந்த நுட்பம் பெரும்பாலும் சினிமா கட்ஸ்கீன்களில் நிகழ்நேர விளையாட்டு செயல்திறனை அதிகமாக பாதிக்காமல் யதார்த்தத்தை மேம்படுத்தப் பயன்படுத்தப்படுகிறது.

டெசலேஷன் ஷேடர்களை பிழைதிருத்தம் செய்தல்

டெசலேஷன் பைப்லைனின் சிக்கலான தன்மை காரணமாக டெசலேஷன் ஷேடர்களை பிழைதிருத்தம் செய்வது தந்திரமானதாக இருக்கலாம். இங்கே சில குறிப்புகள் உள்ளன:

• நீட்டிப்பு ஆதரவைச் சரிபார்க்கவும்: டெசலேஷன் ஷேடர்களைப் பயன்படுத்த முயற்சிக்கும் முன் எப்போதும் `GL_EXT_tessellation` நீட்டிப்பு கிடைக்கிறதா என்பதைச் சரிபார்க்கவும்.
• ஷேடர்களை தனித்தனியாகத் தொகுக்கவும்: தொகுத்தல் பிழைகளைக் கண்டறிய ஒவ்வொரு ஷேடர் நிலையையும் (TCS, TES, ஃபிராக்மென்ட் ஷேடர்) தனித்தனியாகத் தொகுக்கவும்.
• ஷேடர் பிழைதிருத்த கருவிகளைப் பயன்படுத்தவும்: சில கிராபிக்ஸ் பிழைதிருத்த கருவிகள் (எ.கா., RenderDoc) டெசலேஷன் ஷேடர்களை பிழைதிருத்தம் செய்வதை ஆதரிக்கின்றன.
• டெசலேஷன் நிலைகளைக் காட்சிப்படுத்தவும்: டெசலேஷன் எவ்வாறு பயன்படுத்தப்படுகிறது என்பதைக் காட்சிப்படுத்த TCS-இலிருந்து டெசலேஷன் நிலைகளை வண்ண மதிப்புகளாக வெளியிடவும்.
• ஷேடர்களை எளிதாக்குங்கள்: எளிய டெசலேஷன் மற்றும் இடப்பெயர்ச்சி மேப்பிங் அல்காரிதம்களுடன் தொடங்கி படிப்படியாக சிக்கலான தன்மையைச் சேர்க்கவும்.

முடிவுரை

டெசலேஷன் ஷேடர்கள் WebGL-இல் டைனமிக் மேற்பரப்பு விவரங்களை உருவாக்க ஒரு சக்திவாய்ந்த மற்றும் நெகிழ்வான வழியை வழங்குகின்றன. டெசலேஷன் பைப்லைனைப் புரிந்துகொள்வதன் மூலமும், TCS மற்றும் TES நிலைகளில் தேர்ச்சி பெறுவதன் மூலமும், செயல்திறன் தாக்கங்களை கவனமாகக் கருத்தில் கொள்வதன் மூலமும், நீங்கள் முன்பு உலாவியில் அடைய முடியாத பிரமிக்க வைக்கும் காட்சிகளை உருவாக்க முடியும். `GL_EXT_tessellation` நீட்டிப்பு தேவை மற்றும் பரவலான ஆதரவு சரிபார்க்கப்பட வேண்டும் என்றாலும், காட்சி நம்பகத்தன்மையின் எல்லைகளைத் தள்ள விரும்பும் எந்தவொரு WebGL டெவலப்பரின் ஆயுதக் களஞ்சியத்திலும் டெசலேஷன் ஒரு மதிப்புமிக்க கருவியாக உள்ளது. வெவ்வேறு டெசலேஷன் நுட்பங்களுடன் பரிசோதனை செய்யுங்கள், தகவமைப்பு டெசலேஷன் உத்திகளை ஆராயுங்கள், மற்றும் உண்மையிலேயே ஆழமான மற்றும் பார்வைக்கு வசீகரிக்கும் வலை அனுபவங்களை உருவாக்க டெசலேஷன் ஷேடர்களின் முழு திறனையும் திறக்கவும். வெவ்வேறு வகையான டெசலேஷன்களுடன் (எ.கா. முக்கோணம், குவாட், ஐசோலைன்) மற்றும் இடைவெளி அமைப்புகளுடன் (எ.கா. சமம், பின்னம்_சமம், பின்னம்_ஒற்றை) பரிசோதனை செய்ய பயப்பட வேண்டாம், வெவ்வேறு விருப்பங்கள் மேற்பரப்புகள் எவ்வாறு பிரிக்கப்படுகின்றன மற்றும் அதன் விளைவாக வரும் வடிவியல் எவ்வாறு உருவாக்கப்படுகிறது என்பதற்கு வெவ்வேறு அணுகுமுறைகளை வழங்குகின்றன.